<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>营地房车查询</title>
    <script type="text/javascript" src="/js/jquery-2.1.4.js" ></script>
    <script type="text/javascript" src="/js/vue.js" ></script>
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <!-- 引入样式 -->
    <link type="text/css" rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
    <script type="text/javascript" src="/element-ui/lib/index.js"></script>
    <style>
        .demo-table-expand {
            font-size: 0;
        }
        .demo-table-expand label {
            width: 90px;
            color: #99a9bf;
        }
        .demo-table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
            width: 50%;
        }
        .camp_img{
            width: 200px;
            margin-right: 20px;
        }
        .search{
            width: 200px;
        }
        .fenye{
            width: 500px;
            height: 100px;
            margin: 0 auto;
            text-align: center;
        }
        .header{
            width: 100%;
            height: 50px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="div">
        <div class="header">
            <el-button type="success" @click="addDialogVisible = true">新增营地信息</el-button>
<!--            <el-input class="search" placeholder="请输入城市名："  clearable suffix-icon="el-icon-search" v-model="cityName"></el-input>-->
            <el-input class="search" placeholder="请输入关键字："  clearable suffix-icon="el-icon-search" v-model="campName"></el-input>
            <el-button type="primary" @click="selectCamp()">查询</el-button>
        </div>
        <!--新增camp模态框-->
        <el-dialog
                title="新增营地信息"
                :visible.sync="addDialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>营地名：</span><br>
            <el-input v-model="insertCampInfo.campName" placeholder="请输入营地名"></el-input>
            <span>城市:</span><br>
            <el-select v-model="insertCampInfo.cityId" placeholder="请选择">
                <el-option
                        v-for="city in citys"
                        :key="city.cityId"
                        :label="city.cityName"
                        :value="city.cityId">
                </el-option>
            </el-select><br>
            <span>营地地址：</span><br>
            <el-input v-model="insertCampInfo.address" placeholder="请输入营地地址"></el-input>
            <span>营地电话：</span><br>
            <el-input type="number" v-model="insertCampInfo.tel" placeholder="请输入营地电话"></el-input>
            <span>营地介绍：</span><br>
            <el-input v-model="insertCampInfo.introduce" placeholder="请输入营地介绍"></el-input>
            <!--上传图片-->
            <el-upload
                    class="upload-demo"
                    action="/uploadImgs"
                    :on-remove="handleRemove"

                    :on-success="successUpload"
                    :before-upload="setUploadBytes"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过3M</div>
            </el-upload>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertCamp()">确 定</el-button>
            </span>
        </el-dialog>
        <!--更新模态框-->
        <el-dialog
                title="更新营地信息"
                :visible.sync="updateDialogVisible"
                width="50%"
                :before-close="handleClose">
            <span>营地名:</span><el-input v-model="updateCampInfo.campName" placeholder="请输入内容"></el-input>
            <span>电话:</span><el-input v-model="updateCampInfo.tel" placeholder="请输入内容"></el-input><br>
            <span>城市:</span><br>
            <el-select v-model="updateCampInfo.cityId" placeholder="请选择">
                <el-option
                        v-for="city in citys"
                        :key="city.cityId"
                        :label="city.cityName"
                        :value="city.cityId">
                </el-option>
            </el-select><br>
            <span>地址:</span><el-input v-model="updateCampInfo.address" placeholder="请输入内容"></el-input>
            <span>营地介绍:</span><el-input  type="textarea"  autosize v-model="updateCampInfo.introduce" placeholder="请输入内容"></el-input>
            <span>图片:</span><br><img :src="updateCampInfo.url" alt="">
            <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateCamp()">确 定</el-button>
            </span>
        </el-dialog>
        <!--删除模态框-->
        <el-dialog
                title="移除营地"
                :visible.sync="deleteDialogVisible"
                width="30%"
                :before-close="handleClose">
            <span>营地名:</span><el-input v-model="deleteCampInfo.campName" placeholder="请输入内容"></el-input>
            <span>电话:</span><el-input  v-model="deleteCampInfo.tel" placeholder="请输入内容"></el-input><br>
            <span>城市:</span><el-input  v-model="deleteCampInfo.cityName" placeholder="请输入内容"></el-input><br>
            <span>地址:</span><el-input  v-model="deleteCampInfo.address" placeholder="请输入内容"></el-input>
            <span>营地介绍:</span><el-input  type="textarea"  autosize  v-model="deleteCampInfo.introduce" placeholder="请输入内容"></el-input>
            <span>图片:</span><br><img :src="deleteCampInfo.url" alt="">
            <span slot="footer" class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="deleteCamp()">确认删除</el-button>
            </span>
        </el-dialog>
        <template>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column type="expand">
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <img class="camp_img" :src="props.row.url" />
                            <el-form-item label="营地介绍">
                                <span>{{ props.row.introduce }}</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column label="营地编号" prop="campId">
                </el-table-column>
                <el-table-column label="营地名称" prop="campName">
                </el-table-column>
                <el-table-column label="电话" prop="tel">
                </el-table-column>
                <el-table-column label="城市" prop="cityName">
                </el-table-column>
                <el-table-column label="地址" prop="address">
                </el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <div class="fenye">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.pageIndex"
                        :page-sizes="[2, 4, 6, 8]"
                        :page-size="page.number"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.dataCount">
                </el-pagination>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        new Vue({
            el:"#div",
            data:{
                cityName:'',
                campName:'',
                //定义集合存储营地信息
                tableData:[],
                page: {
                    pageIndex:1,
                    number:2,
                    pageCount:null,
                    dataCount:null
                },
                //新增camp模态框默认关闭
                updateDialogVisible:false,
                addDialogVisible:false,
                deleteDialogVisible:false,
                //定义一个对象接收将要更新的信息
                insertCampInfo: {
                    campId:'',
                    campName:'',
                    cityId:'',
                    cityName:'',
                    tel:'',
                    address:'',
                    introduce:''
                },
                //定义一个对象接收将要更新的信息
                updateCampInfo: {
                    campId:'',
                    campName:'',
                    cityId:'',
                    cityName:'',
                    tel:'',
                    address:'',
                    introduce:''
                },
                //记录要删除营地的信息
                deleteCampInfo:{
                    campId:'',
                    campName:'',
                    cityId:'',
                    cityName:'',
                    tel:'',
                    address:'',
                    introduce:''
                },
                citys:''

            },
            created:function () {
               this.selectCamp();
               this.selectCity();
            },
            methods:{
                //上传图片
                //添加商品时删除图片
                handleRemove(file) {

                },
                //设置图片上传大小
                setUploadBytes(file){
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isLt2M = file.size / 1024/1024  < 3;

                    if (!isJPG &&  !isPNG) {
                        this.$message.error('上传图片必须是JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传图片大小不能超过3M!');
                    }
                    return (isJPG || isPNG) && isLt2M;
                },
                //添加商品时添加图片成功后的
                successUpload(response,file){

                },
                //查询营地信息
                selectCamp(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/selectCamp",
                        type: "get",
                        data: {
                            "index":_this.page.pageIndex,
                            "number":_this.page.number,
                            "cityName":_this.cityName,
                            "campName":_this.campName
                        },
                        dataType: "json",
                        success: function(data) {
                            _this.tableData=data.list,
                            _this.page.pageIndex = data.obj.pageIndex;
                            _this.page.number = data.obj.number;
                            _this.page.pageCount = data.obj.pageCount;
                            _this.page.dataCount = data.obj.count;
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //查询所有城市信息
                selectCity(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/selectAllCity",
                        type: "get",
                        dataType: "json",
                        success: function(data) {
                            _this.citys = data.list;
                        },
                        error: function(data) {
                            alert(data.responseJSON.message);
                        }
                    });
                },
                insertCamp(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/insertCamp",
                        type: "post",
                        data: _this.insertCampInfo,
                        dataType: "json",
                        success: function(data) {
                            _this.open1();
                            _this.selectCamp();
                            _this.insertDialogVisible=false;
                        },
                        error: function(data) {
                            _this.open2();
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //更新营地信息
                updateCamp(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/updateCamp",
                        type: "get",
                        data: _this.updateCampInfo,
                        dataType: "json",
                        success: function(data) {
                          // alert("信息已更新")
                            _this.open1();
                            _this.selectCamp();
                            _this.updateDialogVisible=false;
                        },
                        error: function(data) {
                            _this.open2();
                            alert(data.responseJSON.message);
                        }
                    });
                },
                //删除营地信息
                deleteCamp(){
                    var _this = this;
                    $.ajax({
                        url: "/camp/deleteCampByCampId",
                        type: "get",
                        data: {"campId":_this.deleteCampInfo.campId},
                        dataType: "json",
                        success: function(data) {
                            _this.open1();
                            _this.page.pageIndex = 1;
                            _this.selectCamp();
                            _this.deleteDialogVisible=false;
                        },
                        error: function(data) {
                            _this.open2();
                            alert(data.responseJSON.message);
                        }
                    });
                },
                handleEdit:function(index, row) {
                    this.updateDialogVisible=true;
                    this.updateCampInfo = row;
                },
                handleDelete:function(index, row) {
                    this.deleteDialogVisible=true;
                    this.deleteCampInfo = row;
                    console.log(this.deleteCampInfo)
                    // this.deleteCamp(row.campId)
                },
                //分页
                handleSizeChange(val) {
                    this.page.number = val;
                    this.selectCamp();
                },
                handleCurrentChange(val) {
                    this.page.pageIndex = val;
                    this.selectCamp();
                },
                //模态框确认
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                //操作成功提示
                open1() {
                    this.$notify({
                        title: '成功',
                        message: '操作成功',
                        type: 'success'
                    });
                },
                open2() {
                    this.$notify.error({
                        title: '错误',
                        message: '操作失败'
                    });
                }
            },
            watch:{

            }
        })
    </script>
</body>
</html>